<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>订单管理</h2>
        </div>
      </div>

      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <Card style="margin-bottom: 10px;">
            <div class="normal-list-page-hd clearfix">
                  <Input placeholder="请输入收货人" class="mr-10" v-model="queryData.consignee" style="width: 150px"  :clearable=true />
              <Input placeholder="请输入手机号" class="mr-10" v-model="queryData.mobile" style="width: 150px"  :clearable=true />
              <Input placeholder="请输入订单号" class="mr-10" v-model="queryData.orderSn" style="width: 250px"  :clearable=true />
              <Input placeholder="请输入物流号" class="mr-10" v-model="queryData.shipSn" style="width: 250px"  :clearable=true />
              <Select placeholder="请选择订单状态" class="mr-10" v-model="queryData.status" style="width:150px" :clearable=true>
                <Option v-for="item in modal.mallOrder.status" :value="item.value" :key="item.value">{{ item.label }}
                </Option>
              </Select>
              <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click='getTableData' >查询</Button>
            </div>
          </Card>

          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"
                   @on-selection-change="selectionChange"></Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page"
                  @on-change="changePage" @on-page-size-change="onPageSizeChange" show-elevator show-total
                  show-sizer></Page>
          </div>
        </div>
        <Modal v-model="modal.mallOrder.ShowSend" :loading="modal.mallOrder.load" :mask-closable="false"
               :title="modal.mallOrder.title"   @on-ok="postDate">
          <Form ref="systemFrom" :model="modal.mallOrder.formData" :rules="modal.mallOrder.rules"
                :label-width="120">
            <FormItem label="订单编号" prop="orderSn">
              <Input placeholder="请输入订单编号" disabled v-model="modal.mallOrder.formData.orderSn" style="width:300px;"/>
            </FormItem>
            <FormItem label="物流号" prop="shipSn">
              <Input placeholder="请输入物流号" v-model="modal.mallOrder.formData.shipSn" style="width:300px;"/>
            </FormItem>
            <FormItem label="发货快递公司" prop="shipChannel">
              <Input placeholder="请输入发货快递公司" v-model="modal.mallOrder.formData.shipChannel" style="width:300px;"/>
            </FormItem>
          </Form>
        </Modal>
        <Modal v-model="modal.mallOrder.ShowDetail" :loading="modal.mallOrder.loadDetail"
               :title="modal.mallOrder.title" @on-ok="postDat" width = "60vw"  >
            <Table border :columns="list2.columns1" :data="list2.tableData2"></Table>
          <div slot="footer"/>
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
import OrderApi from '@/api/business/order.js'
import moment from 'moment'
import { Message } from 'iview'
export default {
  name: 'mallOrder',
  data () {
    return {
      list2: {
        // 列表展示数据
        tableData2: [],
        columns1: [
          { title: '订单编号', key: 'orderId', minWidth: 100, align: 'center' },
          { title: '商品名字', key: 'name', minWidth: 100, align: 'center' },
          { title: '商品图片',
            key: 'image',
            minWidth: 100,
            align: 'center',
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: params.row.image
                },
                style: {
                  width: '70%',
                  height: '70%'
                }
              })
            } },
          { title: '商品单价', key: 'price', minWidth: 100, align: 'center' },
          { title: '商品数量', key: 'num', minWidth: 100, align: 'center' },
          {
            title: '总价',
            key: 'realPrice',
            minWidth: 100,
            align: 'center'
          }
        ]
      },
      // 弹出层数据
      modal: {
        mallOrder: {
          ShowDetail: false,
          loadDetail: true,
          ShowSend: false,
          load: true,
          type: 'create', // create 新建，update 修改
          title: '新建',
          status: [{
            value: 1,
            label: '待付款'
          },
          {
            value: 2,
            label: '待发货'
          },
          {
            value: 3,
            label: '待收货'
          },
          {
            value: 4,
            label: '待评价'
          },
          {
            value: 5,
            label: '已确认'
          },
          {
            value: 6,
            label: '已退款'
          },
          {
            value: 7,
            label: '已取消'
          }
          ],
          rules: {
            shipChannel: [
              {
                required: true,
                message: '发货快递公司',
                trigger: 'blur'
              }
            ]
          },
          formData: {}
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          /** 开始自动生成 */
          { title: '订单编号', key: 'orderSn', minWidth: 250, align: 'center' },
          { title: '订单状态',
            key: 'orderStatus',
            minWidth: 100,
            align: 'center',
            render: (h, params) => {
              if (params.row.status == '1') {
                return h('div', {
                  style: {
                    color: 'blue'
                  }
                }, '待付款')
              } else if (params.row.status == '2') {
                return h('div', {
                  style: {
                    color: 'green'
                  }
                }, '待发货')
              } else if (params.row.status == '3') {
                return h('div', {
                  style: {
                    color: '#800000'
                  }
                }, '待收货')
              } else if (params.row.status == '4') {
                return h('div', {
                  style: {
                    color: '#01a1ff'
                  }
                }, '待评价')
              } else if (params.row.status == '5') {
                return h('div', {
                  style: {
                    color: '#9932CC'
                  }
                }, '已确认')
              } else if (params.row.status == '6') {
                return h('div', {
                  style: {
                    color: 'red'
                  }
                }, '已退款')
              } else if (params.row.status == '7') {
                return h('div', {
                  style: {
                    color: 'orange'
                  }
                }, '已取消')
              }
            } },
          { title: '收货人名称', key: 'consignee', minWidth: 100, align: 'center' },
          { title: '收货人手机号', key: 'mobile', minWidth: 150, align: 'center' },
          {
            title: '收货具体地址',
            key: 'address',
            align: 'center',
            minWidth: 300
          },
          //   { title: '用户积分', key: 'integralPrice', minWidth: 100, align: 'center' },
          {
            title: '下单时间',
            key: 'createTime',
            minWidth: 150,
            align: 'center'
          },
          {
            title: '付款时间',
            key: 'payTime',
            minWidth: 150,
            align: 'center'
          },
          {
            title: '支付方式',
            key: 'payType',
            minWidth: 120,
            align: 'center',
            render: (h, params) => {
              if (params.row.payType == 'wx') {
                return h('div', {
                  style: {
                    color: 'blue'
                  }
                }, '微信')
              } else if (params.row.payType == 'alipay') {
                return h('div', {
                  style: {
                    color: 'blue'
                  }
                }, '支付宝')
              } else if (params.row.payType == 'wxProgram') {
                return h('div', {
                  style: {
                    color: 'blue'
                  }
                }, '微信')
              } else if (params.row.payType == 'integral') {
                return h('div', {
                  style: {
                    color: 'blue'
                  }
                }, '积分')
              } else {
                return h('div', {
                  style: {
                    color: 'blue'
                  }
                }, '未支付')
              }
            }
          },
          {
            title: '支付总额',
            key: 'realPrice',
            minWidth: 100,
            align: 'center',
            render: (h, params) => {
              if (params.row.payType == 'wx') {
                return h('div', {
                }, params.row.realPrice / 100)
              } else if (params.row.payType == 'alipay') {
                return h('div', {
                }, params.row.realPrice / 100)
              } else if (params.row.payType == 'wxProgram') {
                return h('div', {
                }, params.row.realPrice / 100)
              } else {
                return h('div', {
                }, params.row.realPrice)
              }
            }
          },
          { title: '物流号', key: 'shipSn', minWidth: 150, align: 'center' },
          { title: '发货快递公司', key: 'shipChannel', minWidth: 120, align: 'center' },
          { title: '发货时间', key: 'shipTime', minWidth: 150, align: 'center' },
          { title: '用户确认收货时间', key: 'confirmTime', minWidth: 150, align: 'center' },
          //   { title: '用户openid', key: 'openid', minWidth: 270, align: 'center' },
          /** 自动生成结束 */
          {
            title: '操作',
            align: 'center',
            minWidth: 150,
            fixed: 'right',
            render: (h, params) => {
              if (params.row.status == '2') {
                return h('div', { class: 'action-group' }, [
                  h(
                    'Tooltip',
                    {
                      props: {
                        placement: 'left',
                        content: '发货'
                      },
                      style: {
                        cursor: 'pointer'
                      }
                    },
                    [
                      h(
                        'Button',
                        {
                          props: {
                            type: 'primary',
                            size: 'small'
                          },
                          style: {
                            marginRight: '5px',
                            padding: '1px 2px'
                          },
                          on: {
                            click: () => {
                              // this.showUpdateModal(params.index);
                              console.log(params.row)
                              this.mdSend(params.row)
                            }
                          }
                        },
                        [
                          h('Icon', {
                            props: {
                              type: 'md-send',
                              size: 18
                            }
                          })
                        ]
                      )
                    ]
                  ),
                  h(
                    'Tooltip',
                    {
                      props: {
                        placement: 'left',
                        content: '详情'
                      },
                      style: {
                        cursor: 'pointer'
                      }
                    },
                    [
                      h(
                        'Button',
                        {
                          props: {
                            type: 'primary',
                            size: 'small'
                          },
                          style: {
                            marginRight: '5px',
                            padding: '1px 2px'
                          },
                          on: {
                            click: () => {
                              this.orderDetails(params.row.id)
                            }
                          }
                        },
                        [
                          h('Icon', {
                            props: {
                              type: 'md-menu',
                              size: 18
                            }
                          })
                        ]
                      )
                    ]
                  )
                  // h(
                  //   'Tooltip',
                  //   {
                  //     props: {
                  //       placement: 'right',
                  //       content: '删除'
                  //     },
                  //     style: {
                  //       cursor: 'pointer'
                  //     }
                  //   },
                  //   [
                  //     h(
                  //       'Button',
                  //       {
                  //         props: {
                  //           type: 'error',
                  //           size: 'small'
                  //         },
                  //         style: {
                  //           marginRight: '5px',
                  //           padding: '1px 2px'
                  //         },
                  //         on: {
                  //           click: () => {
                  //             this.delData([params.row.orderSn])
                  //           }
                  //         }
                  //       },
                  //       [
                  //         h('Icon', {
                  //           props: {
                  //             type: ' iconfont icon-shanchusekuai',
                  //             size: 18
                  //           }
                  //         })
                  //       ]
                  //     )
                  //   ]
                  // )
                ])
              } else {
                return h('div', { class: 'action-group' }, [
                  h(
                    'Tooltip',
                    {
                      props: {
                        placement: 'left',
                        content: '详情'
                      },
                      style: {
                        cursor: 'pointer'
                      }
                    },
                    [
                      h(
                        'Button',
                        {
                          props: {
                            type: 'primary',
                            size: 'small'
                          },
                          style: {
                            marginRight: '5px',
                            padding: '1px 2px'
                          },
                          on: {
                            click: () => {
                              // this.showUpdateModal(params.index);
                              this.orderDetails(params.row.id)
                            }
                          }
                        },
                        [
                          h('Icon', {
                            props: {
                              type: 'md-menu',
                              size: 18
                            }
                          })
                        ]
                      )
                    ]
                  )
                  // h(
                  //   'Tooltip',
                  //   {
                  //     props: {
                  //       placement: 'right',
                  //       content: '删除'
                  //     },
                  //     style: {
                  //       cursor: 'pointer'
                  //     }
                  //   },
                  //   [
                  //     h(
                  //       'Button',
                  //       {
                  //         props: {
                  //           type: 'error',
                  //           size: 'small'
                  //         },
                  //         style: {
                  //           marginRight: '5px',
                  //           padding: '1px 2px'
                  //         },
                  //         on: {
                  //           click: () => {
                  //             this.delData([params.row.orderSn])
                  //           }
                  //         }
                  //       },
                  //       [
                  //         h('Icon', {
                  //           props: {
                  //             type: ' iconfont icon-shanchusekuai',
                  //             size: 18
                  //           }
                  //         })
                  //       ]
                  //     )
                  //   ]
                  // )
                ])
              }
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      OrderApi.getPageList(that.queryData)
        .then(res => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },
    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          MallOrderApi.del(
            ids
          ).then(res => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },
    // 发货
    postDate () {
      const that = this
      that.$refs['systemFrom'].validate(valid => {
        if (valid) {
          OrderApi.updateSend(
            that.modal.mallOrder.formData.id,
            that.modal.mallOrder.formData
          )
            .then(res => {
              that.modal.mallOrder.ShowSend = false
              that.modal.mallOrder.load = false
              if (!res.code) {
                that.getTableData()
                that.$Notice.success({
                  title: '保存成功!'
                })
              } else {
                that.$Notice.error({
                  title: res.message
                })
              }
            })
            .catch(error => {
              Message.error(error)
            })
        } else {
          that.modal.mallOrder.load = false
          that.$nextTick(() => {
            that.modal.mallOrder.load = true
          })
        }
      })
    },
    // 订单详情
    orderDetails (orderSn) {
      this.modal.mallOrder.type = 'update'
      this.modal.mallOrder.title = '详细信息'
      const that = this
      OrderApi.getDetailll(orderSn).then(res => {
        that.modal.mallOrder.formData.list2 = res.data
        that.list2.tableData2 = res.data
      }).catch(error => {
        Message.error(error)
      })
      this.modal.mallOrder.ShowDetail = true
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },

    // 显示新建弹窗
    showCreateModal () {
      this.modal.mallOrder.type = 'create'
      this.modal.mallOrder.title = '新建'
      this.modal.mallOrder.formData = {}
      this.modal.mallOrder.isShow = true
    },
    // 发货
    mdSend (row) {
      this.modal.mallOrder.type = 'update'
      this.modal.mallOrder.title = '发货'
      const that = this
      //   OrderApi.getDetail(id).then(res => {
      that.modal.mallOrder.formData = row
      //   })
      //     .catch(error => {
      //       Message.error(error)
      //     })
      this.modal.mallOrder.ShowSend = true
    },
    // 显示修改弹窗
    showUpdateModal (id) {
      this.modal.mallOrder.type = 'update'
      this.modal.mallOrder.title = '修改'
      // 不请求后端，直接list取对象
      // this.modal.mallOrder.formData = JSON.parse(
      //   JSON.stringify(this.list.tableData)
      // )[index];
      const that = this
      MallOrderApi.getDetail(id).then(res => {
        if (res.data.freightType == false) {
          res.data.freightType = '快递'
        } else {
          res.data.freightType = '自提'
        }
        that.modal.mallOrder.formData = res.data
      })
        .catch(error => {
          Message.error(error)
        })
      this.modal.mallOrder.isShow = true
    }
  },
  created () {
    this.getTableData()
  }
}
</script>
